<template>
  <view>
    <u-navbar title="施工队入驻" height="50">
      <text @click="show = true" style="float: right">入驻说明</text>
    </u-navbar>
    <view class="" width style="width: 100%; margin: 50rpx -20rpx 20rpx 0">
      <u-cell-group class="">
        <u-cell-item :arrow="false">
          <u-steps :list="numList" mode="number" :current="step"></u-steps>
        </u-cell-item>
      </u-cell-group>
    </view>
    <view v-if="step == 0 || step == 2" class="">
      <view class="view-box">
        <view class="" v-if="step == 2"> 平台驳回，请重新申请</view>
        <view class="view-item">
          <view style="flex: 3"> 姓名</view>
          <input
            v-model="form.name"
            placeholder="请输入姓名"
            style="background-color: #f7f7f7; flex: 7; width: 200rpx"
            src=""
            alt=""
          />
        </view>
        <view class="view-item" @click="onPicker('time')">
          <view class="title"> 生日</view>
          <view class="info" v-if="form.birthday">
            {{ form.birthday }}
          </view>
          <view v-else class="info"> 选择</view>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>

        <view class="view-item">
          <view style="flex: 3"> 性别</view>
          <u-radio-group v-model="form.sex">
            <u-radio :name="1">男</u-radio>
            <u-radio :name="2">女</u-radio>
          </u-radio-group>
        </view>
        <view class="view-item" @click="onPicker('selector')">
          <view class="title"> 工作经验</view>
          <view class="info" v-if="workerTime">
            {{ workerTime.label }}
          </view>
          <view v-else class="info"> 选择</view>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>
        <view class="view-item" @click="onPicker('region')">
          <view class="title"> 期望工作地址</view>
          <view class="info" v-if="form.exceptWorkArea">
            {{ form.exceptWorkArea }}
          </view>
          <view v-else class="info"> 选择</view>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>
        <view class="view-item">
          <view style="flex: 3"> 联系电话</view>
          <input
            v-model="form.mobile"
            placeholder="请输入联系电话"
            style="background-color: #f7f7f7; flex: 7; width: 200rpx"
            type="number"
            src=""
            alt=""
          />
        </view>
        <view class="view-item2">
          <view class="title"> 个人简介</view>
          <view class="info">
            <textarea
              v-model="form.content"
              style="background-color: #f7f7f7; width: 100%"
              placeholder="请输入个人简介"
              name=""
              id=""
              cols="30"
              rows="10"
            ></textarea>
          </view>
        </view>
      </view>

      <view class="">
        <u-upload
          :action="action"
          :file-list="fileList"
          :before-upload="beforeFileUpload"
          @on-remove="onFileRemove"
        ></u-upload>
      </view>
      <view class="submit_the_module" @click="submit">
        <view>确认申请</view>
      </view>
    </view>
    <view class="apply-status1" v-else-if="step == 1">
      <image class="img" :src="getImageUrl('shz.png')"></image>
      <p>资料审核中，预计需要1-3个工作日敬请耐心等待，谢谢！</p>
    </view>
    <view class="apply-status1" v-else-if="step == 3">
      <image class="img" :src="getImageUrl('shz.png')"></image>
      <p>您已成功入驻！</p>
    </view>

    <u-picker
      :mode="mode"
      v-model="show"
      :range="rangeList"
      @confirm="confirm"
      range-key="label"
    ></u-picker>
  </view>
</template>

<script>
import { BASE_URL, UP_URL } from '../../common/config.js'

export default {
  data() {
    return {
      action: BASE_URL + UP_URL,
      form: {},
      fileList: [],
      step: '',
      numList: [
        {
          name: '资料填写'
        },
        {
          name: '平台审核'
        }
      ],
      show: false,
      mode: '',
      workerTime: '',
      phone: '',
      rangeList: [
        {
          label: '1年',
          value: 1
        },
        {
          label: '2年',
          value: 2
        },
        {
          label: '3年',
          value: 3
        }
      ],
      form: {
        name: '',
        mobile: '',
        sex: 0,
        birthday: '',
        workYear: 0,
        exceptWorkCityId: '',
        exceptWorkArea: '',
        content: ''
      }
    }
  },
  onShow() {
    this.$u.get('/app-api/construction/resume/check').then((res) => {
      this.step = res.data.step
    })
  },
  methods: {
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    onPicker(e) {
      this.mode = e
      this.show = true
    },
    confirm(e) {
      if (this.mode == 'region') {
        this.form.exceptWorkCityId = e.city.value
        this.form.exceptWorkArea = e.province.label + e.city.label + e.area.label
      } else if (this.mode == 'selector') {
        this.workerTime = this.rangeList[e]
      } else {
        this.form.birthday = e.year + '-' + e.month + '-' + e.day
      }
    },
    beforeFileUpload(_index, list) {
      this.fileList = list
    },
    onFileRemove(_index, list) {
      this.fileList = list
    },
    submit() {
      this.form.workYear = this.workerTime.value
      if (!this.form.name) {
        this.$u.toast('姓名不能为空')
        return
      }
      if (!this.form.birthday) {
        this.$u.toast('生日不能为空')
        return
      }
      if (!this.form.exceptWorkCityId) {
        this.$u.toast('期望地址不能为空')
        return
      }
      if (!this.form.content) {
        this.$u.toast('简介不能为空')
        return
      }
      if (!this.form.mobile) {
        this.$u.toast('手机号不能为空')
        return
      }

      if (!this.form.workYear) {
        this.$u.toast('工作年限不能为空')
        return
      }
      this.$u.post('/app-api/construction/resume/save', this.form).then((res) => {
        this.$u.toast('成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 800)
      })
    }
  }
}
</script>

<style>
page {
  background-color: #f2f2f2;
}

.view-box {
  background-color: #fff;
  margin: 20rpx 0;
}

.view-item {
  display: flex;
  border-bottom: #ededed solid 2rpx;
  padding: 30rpx;
}

.title {
  flex: 1;
}

.view-item2 {
  padding: 20rpx;
  line-height: 55rpx;
}

.apply-status1 {
  margin-top: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img {
  width: 550rpx;
  height: 300rpx;
}

.apply-status1 p {
  width: 70%;
  text-align: center;
}

.submit_the_module {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

.submit_the_module view {
  width: 96%;
  border-radius: 40rpx;
  padding: 20rpx 0rpx;
  background-color: #0f76bc;
  color: #f1f1f1;
  font-size: 30rpx;
  text-align: center;
}
</style>
